<template>
  <el-dialog v-dialogDrag v-if="popenevTVisible" title="标签预览" :close-on-click-modal="false" :before-close="handleCancel" :visible.sync="popenevTVisible" width="990px">
    <div class="bar-view" :style="{width: barWidth + 'px', height: barHeight + 'px'}" id="printArea">
      <div v-if="barWz === 'left'" class="bar-wrap">
        <svg ref="barcode" v-if="tmlx === '1'"></svg>
        <canvas ref="qrcodeCanvas" v-if="tmlx === '0'"></canvas>
        <div class="list">
          <p class="title">{{ title }}</p>
          <p v-for="(item, index) in zctmList" :key="index">{{ item.zctm }}: XXXXX</p>
        </div>
      </div>
      <div v-else-if="barWz === 'right'" class="bar-wrap">
        <div class="list">
          <p class="title">{{ title }}</p>
          <p v-for="(item, index) in zctmList" :key="index">{{ item.zctm }}: XXXXX</p>
        </div>
        <svg ref="barcode" v-if="tmlx === '1'"></svg>
        <canvas ref="qrcodeCanvas" v-if="tmlx === '0'"></canvas>
      </div>
      <div v-else>
        <svg v-if="tmlx === '1'" ref="barcode" :class="{'barTop': barWz === 'top', 'barBottom': barWz === 'bottom'}"></svg>
        <canvas v-if="tmlx === '0'" ref="qrcodeCanvas" :class="{'barTop': barWz === 'top', 'barBottom': barWz === 'bottom'}"></canvas>
        <div :style="{paddingTop: barWz === 'top' ? height + 'px' : '0px'}">
          <p class="title">{{ title }}</p>
          <p v-for="(item, index) in zctmList" :key="index">{{ item.zctm }}: XXXXX</p>
        </div>
      </div>
    </div>
    <template slot="footer">
      <el-button type="primary" v-print="'#printArea'">打印</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick, onMounted, defineExpose } from 'vue';
import JsBarcode from 'jsbarcode';
import QRCode from 'qrcode';
import { ElMessage } from 'element-plus';

// 响应式数据
const popenevTVisible = ref(false);
const title = ref('');
const promiseStatus = ref(null);
const tmlx = ref('');
const value = ref('1234567');
const width = ref(1);
const height = ref(20);
const fontSize = ref(10);
const margin = ref(0);
const displayValue = ref(false);
const font = ref('fantasy');
const barWidth = ref(150);
const barHeight = ref(100);
const barWz = ref('bottom');
const QRCodeMsg = ref('');
const zctmList = ref([]);

// DOM引用
const barcode = ref(null);
const qrcodeCanvas = ref(null);

// 生命周期钩子
onMounted(() => {
  // 初始化逻辑
});

// 显示模态框方法
const show = (paramsData, config) => {
  console.log(paramsData, '数据');
  
  // 设置数据
  title.value = paramsData.mbmc;
  width.value = paramsData.txmkd || width.value;
  height.value = paramsData.txmgd || height.value;
  barWidth.value = paramsData.bqzk || barWidth.value;
  barHeight.value = paramsData.bqzg || barHeight.value;
  barWz.value = paramsData.txmwz === '0' ? 'top' : paramsData.txmwz === '1' ? 'bottom' : paramsData.txmwz === '2' ? 'left' : 'right';
  tmlx.value = paramsData.tmlx;
  zctmList.value = paramsData[paramsData.subListData[0].subListName] || [];

  popenevTVisible.value = true;

  nextTick(() => {
    if (tmlx.value && tmlx.value === '1') {
      // 条形码
      JsBarcode(barcode.value, value.value, {
        width: width.value,
        height: height.value,
        fontSize: fontSize.value,
        displayValue: displayValue.value,
        margin: margin.value
      });
    } else if (tmlx.value && tmlx.value === '0') {
      // 二维码
      generateQRCode();
    }
  });

  // 创建promise
  return new Promise((resolve, reject) => {
    promiseStatus.value = {
      resolve,
      reject
    };
  });
};

// 生成二维码
const generateQRCode = () => {
  const opts = {
    errorCorrectionLevel: 'H', // 容错级别
    type: 'image/png', // 生成的二维码类型
    quality: 0.3, // 二维码质量
    margin: 0, // 二维码留白边距
    width: height.value, // 宽
    height: height.value, // 高
    text: '', // 二维码内容
    color: {
      dark: '#333333', // 前景色
      light: '#fff' // 背景色
    }
  };
  
  QRCodeMsg.value = 'http://www.baidu.com'; // 生成的二维码为URL地址
  
  // 将获取到的数据画到canvas上
  if (qrcodeCanvas.value) {
    QRCode.toCanvas(qrcodeCanvas.value, QRCodeMsg.value, opts, (error) => {
      if (error) {
        console.error('生成二维码失败:', error);
        ElMessage.error('生成二维码失败');
      }
    });
  }
};

// 关闭模态框
const handleCancel = () => {
  popenevTVisible.value = false;
  
  if (promiseStatus.value) {
    promiseStatus.value.reject({
      msg: '取消'
    });
  }
};

// 导出方法供外部调用
defineExpose({
  show
});
</script>

<style scoped>
.bar-view {
  border: 1px dashed #eee;
  position: relative;
  padding: 10px;
}

.barTop {
  position: absolute;
  top: 10px;
  left: 10px;
}

.barBottom {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.bar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.list {
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: bold;
  font-size: 18px;
}
</style>